<template>
    <div class="Enterprise" >
        <div class="head_Enterprise" >
            <h2><i @click="goMine">返回</i>企业认证</h2>
            <p>上传资料仅用于认证审核，公司会严格保密不会外传</p>
        </div>
        <div v-if="successInfo==null">
            <div class="main_Enterprise">
            <h4>上传照片</h4>
            <div class="sendPhoto">
                <van-uploader v-model="fileList" style="width:100%">
                    <template #preview-cover="{ file }">
                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                    </template>
                </van-uploader>
                <p>上传营业执照</p>
            </div>
            <div>
                <ul>
                    <li>
                        <i>企业名称</i> 
                        <input type="text" placeholder="输入营业执照上的名称">
                    </li>
                    <li>
                        <i>所在区域</i> 
                        <van-cell is-link @click="showPopup" >
                            <i :class="{active:city}">{{city?city:"请选择"}}</i>
                        </van-cell>
                        <van-popup v-model:show="show" >
                            <van-area title="标题" :area-list="areaList" :columns-num="3" @confirm="curCity" @cancle="" />
                        </van-popup>
                        
                    </li>
                    <li>
                        <i>详细地址</i> 
                        <input type="text" placeholder="(如小区名牌号)">
                    </li>
                </ul>
            </div>
            </div>
            <div class="foot_Enterprise">
            <p>为避免审核不通过，请详细阅读如何提交实名认证</p>
            <button @click="sendEnterpriseInfo">下一步</button>
            </div>
        </div>
        <div class="renzhen" v-else >     
            <img src="../assets/img/认证成功@2x.png" alt="" v-if="successInfo">
            <img src="../assets/img/认证失败@2x.png" alt="" v-else>
        </div>
    </div>
    
    
</template>

<script>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {getEnterpriseInfo} from "../utils/api.js";
export default {
  setup(){
    const router = useRouter();
    const store = useStore();
    //城市选择
    const areaList = {
        province_list: {
            110000: '北京市',
            120000: '天津市',
            130000: '浙江省',
        },
        city_list: {
            110100: '北京市',
            120100: '天津市',
            130100: '杭州市',
            130200: '衢州市',
        },
        county_list: {
            110101: '东城区',
            110102: '西城区',
            120101: '北城区',
            120102: '南城区',
            130101: '江干区',
            130102: '萧山区',
            130201: '龙游县',
            130202: '开化县',
            130203: '江山县',
            130204: '衢江区',
        }
    };
    //控制区域选择弹出
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    // 当前城市
    const city = ref("");
    //点击选择当前城市
    const curCity=(info)=>{
        console.log(info[1].name);
        city.value=info[1].name;
        console.log(city);
        show.value = false;
    }
    //发送信息
    const successInfo=ref(null);
    const sendEnterpriseInfo=async()=>{
        // localStorage.setItem("userToken","60ac9fa447dda8086d10d915");
        //console.log(localStorage.getItem("userToken"),city.value,successInfo.value);
        if(localStorage.getItem("userToken")&&city.value){
            const token=localStorage.getItem("userToken");
            const res=await getEnterpriseInfo({token:token,address:city.value});
            console.log(res);
            successInfo.value= true;
            // store.state.Enterprise_Certification=true;
            localStorage.setItem("Enterprise_Certification",true);
           
        }else{
            successInfo.value= false;
            localStorage.setItem("Enterprise_Certification",false);
            // store.state.Enterprise_Certification=false;
        }
        // console.log(store.state.Enterprise_Certification);
        //console.log(successInfo.value);
    }
    //回到我的
    const goMine=()=>{
        router.push("/home/mine");
    }
    //
    return { areaList,show,showPopup,curCity,city,sendEnterpriseInfo,successInfo,goMine};
  }
};
</script>
<style lang="scss">
    .head_Enterprise{
        color:black;
        text-align: center;
        box-sizing:border-box;
        h2{
            width:100%;
            text-align: center;
            font-size: 22px;
            height:35px;
            line-height:35px;
            position: relative;
            i{
                position: absolute;
                left:10px;
                font-size: 17px;
                color:rgb(168, 168, 168);
            }
        }
        p{
            color:rgb(168, 168, 168);
            background-color:rgb(223, 246, 250);
            font-size: 14px;
            height:35px;
            line-height:35px;
        }
    }
    .main_Enterprise{
        padding:0 10px;
        color:black;
        font-size: 19px;
        .active{
            color:black;
        }
        h4{
            height:45px;
            line-height:45px;
            
        }
        .sendPhoto{
            .preview-cover {
                position: absolute;
                bottom: 0;
                box-sizing: border-box;
                width: 100%;
                padding: 4px;
                color: #fff;
                font-size: 12px;
                text-align: center;
                background: rgba(0, 0, 0, 0.3);
                
            }
            .van-uploader__preview{
                width: 100%!important;
                height:200px;
                
            }
            .van-uploader__wrapper,.van-uploader__upload{
                    width: 100%!important;
                    height:200px;
                    .van-image,.van-uploader__preview-cover{
                        width:100%;
                        height:100%;
                        display: block;
                    }
            }
            .van-uploader__wrapper{
                border:2px dashed rgb(141, 141, 141);
                box-sizing: border-box;
                overflow: hidden
            }
            .van-uploader__upload{
                margin:0;
            }
            .van-uploader__upload-icon{
                font-size: 45px;
            }
            p{
                width:100%;
                text-align: center;
                color:rgb(161, 161, 161);
                line-height:40px;
                height:40px;
            }
            
        }
        li{
            height:60px;
            line-height:60px;
            border-bottom: 1px solid rgb(226, 226, 226);
            font-size: 18px;
            &:nth-of-type(1){
                border-top: 1px solid rgb(226, 226, 226);
            }
            .van-area{
                width:280px;
            }
            input{
                border:0px;
                // outline:0;
                margin-left: 20px;
                font-size: 16px;
            }
            .van-cell{
                display: inline-block;
                width: 70%;
                height:95%;
                overflow: hidden;
                vertical-align:middle;
                .van-cell__value {
                    display: inline-block;
                    width:60%;
                    font-size: 16px;
                    color: rgb(119, 119, 119);
                    margin-left: 5px;
                }
            }
        }
    }
    .foot_Enterprise{
        text-align: center;
        p{
            width:100%;
            text-align: center;
            font-size: 13px;
            color: rgb(119, 119, 119);
            line-height:75px;
            height:75px;
        }
        button{
            width:200px;
            height:40px;
            border-radius: 20px;
            border:0px;
            background-color:rgb(86, 179, 148);
            color:white;
            font-size: 16px;
        }
    }
    .renzhen{
        width:100%;
        height:100%;
        text-align: center;
        img{
            width:200px;
            height:200px;
            margin:0 auto;
        }
    }
</style>